/* color palette from <https://github.com/vuejs/theme> */
:root {
  --color-white: #fff;
  --color-black: #121212;
  /* 侧边栏深浅色 */
  --menu-bg-color: #f2f3f5;
  --menu-bg-color-dark: #2e2e30;
  /* 底部控制器深浅色 */
  --controller-bg-color: #fdfdfd;
  --controller-bg-color-dark: #17171a;
  --controller-shadow-color: #ccc;
  --controller-shadow-color-dark: #2e2e30;
  /* icon background color */
  --icon-bg-color: #c9cdd4;
  --icon-bg-color-dark: #505051;
  /* kdb */
  --kbd-bd-color: #ccc;
  --kbd-bd-color-dark: #333335;
  /* progress color */
  --progress-base-bg: #dadee3;
  --progress-base-bg-dark: #71757b;
  --progress-base-bg: #dadee3;
  --progress-base-bg-dark: #71757b;
  --progress-loading-bg: #cbd1d8;
  --progress-loading-bg-dark: #9aa0a7;

  /* 滚动条背景色 */
  --scrollbar-bg-color: #dddee0;
  --scrollbar-bg-color-dark: #3e3f41;
  /* element-plus */
  --el-menu-bg-color: var(--menu-bg-color);
}

/* semantic color variables for this project */
:root {
  --color-base: var(--color-black);
  --color-base-not: var(--color-white);
  --color-menu-bg: var(--menu-bg-color);
  --color-controller-bg: var(--controller-bg-color);
  --color-controller-shadow: var(--controller-shadow-color);
  --color-icon-bg: var(--icon-bg-color);
  --color-kbd-bg: var(--kbd-bg-color);
  --color-kbd-bd: var(--kbd-bd-color);

  /* progress color */
  --color-progress-base-bg: var(--progress-base-bg);
  --color-progress-loading-bg: var(--progress-loading-bg);

  /* font color */
  --font-color-level-3: #3c3c3c;
  /* scrollbar */
  --color-scrollbar-bg: var(--scrollbar-bg-color);
  /* element-plus */
  --el-mask-color: var(--color-white);
}

html.dark {
  --color-base: var(--color-white);
  --color-base-not: var(--color-black);
  --color-menu-bg: var(--menu-bg-color-dark);
  --color-controller-bg: var(--controller-bg-color-dark);
  --color-controller-shadow: var(--controller-shadow-color-dark);
  --color-icon-bg: var(--icon-bg-color-dark);
  --color-kbd-bg: var(--kbd-bg-color-dark);
  --color-kbd-bd: var(--kbd-bd-color-dark);

  /* font color */
  --font-color-level-3: #9b8c8c;

  /* progress color */
  --color-progress-base-bg: var(--progress-base-bg-dark);
  --color-progress-loading-bg: var(--progress-loading-bg-dark);

  /* scrollbar */
  --color-scrollbar-bg: var(--scrollbar-bg-color-dark);

  /* element-plus */
  --el-menu-bg-color: var(--menu-bg-color-dark);
  --el-mask-color: var(--color-black);
}
